<template>
  <div class="hamburgerContainer" @click="handleClick">
    <SvgIcon
      icon-name="ant-design:bars-outlined"
      custom-class="hamburger"
      :class="{ 'rotate-180': appStore.sidebar.opened }"
    ></SvgIcon>
  </div>
</template>

<script setup lang="ts">
import { useAppStore } from "@/store"

const appStore = useAppStore()

const handleClick = () => {
  appStore.toggleSidebar()
}
</script>

<style scoped lang="scss">
.hamburgerContainer {
  @apply float-left cursor-pointer px-[10px] hover:(bg-black/5);

  .hamburger {
    @apply w-[30px] h-[30px] transition-transform duration-500 ease-in-out;
  }
}
</style>
